<script lang="ts" setup>
import { House, ArrowRight, List } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import createAxios from "../request";
import userStore from "../store/UserStore";

let store = userStore();
let empno = store.getEmpno;
let axios = createAxios();

const ruleFormRef = ref<FormInstance>();

const checkOldpass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入原密码"));
  } else {
    callback();
  }
};
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入新密码"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass");
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入新密码"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次输入新密码不匹配！"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  pass: "",
  checkPass: "",
  oldpass: "",
});

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  oldpass: [{ validator: checkOldpass, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (ruleForm.pass == ruleForm.oldpass) {
        ElMessage.error("新旧密码一致");
      } else {
        console.log("submit!");
        axios({
          url: `/changePassword`,
          method: "POST",
          data: {
            empno: empno,
            oldPassword: ruleForm.oldpass,
            newPassword: ruleForm.pass,
          },
        })
          .then((res) => {
            //请求成功
            if (res.data == 0) {
              ElMessage.error("原密码错误");
            } else if (res.data == 1) {
              ElMessage.success("修改密码成功");
            } else {
              ElMessage.error("修改密码失败");
            }
          })
          .catch((err) => {
            //请求失败
            ElMessage.error("修改密码失败");
          });
      }
    } else {
      console.log("error submit!");
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<template>
  <el-container id="mainView">
    <el-header
      style="
        background-color: #272822;
        color: #e5e5e5;
        line-height: 60px;
        font-size: 27px;
      "
      >修改登录密码</el-header
    >
    <el-footer
      style="
        height: 30px;
        line-height: 30px;
        background-color: #4e5246;
        border-bottom: 1px solid #7a7a7a;
        border-top: 1px solid #7a7a7a;
      "
    >
      <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px">
        <el-breadcrumb-item :to="{ path: '/home/homepage' }"
          ><el-icon><House /></el-icon>首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>修改登录密码</el-breadcrumb-item>
      </el-breadcrumb>
    </el-footer>
    <el-main style="padding-bottom: 0%">
      <el-card style="width: 100%; line-height: 55px">
        <div class="card">
          <span style="color: #e5e5e5; line-height: 30px">
            <el-icon><List /></el-icon>
            修改登录密码
          </span>
          <el-divider style="margin-bottom: 20px; margin-top: 0px" />
          <div class="form_item">
            <el-form
              ref="ruleFormRef"
              style="width: 600px"
              :model="ruleForm"
              status-icon
              :rules="rules"
              label-width="auto"
              class="demo-ruleForm"
            >
              <el-form-item label="原密码" prop="oldpass" required>
                <el-input v-model.number="ruleForm.oldpass" />
              </el-form-item>
              <el-form-item label="新密码" prop="pass" required>
                <el-input
                  v-model="ruleForm.pass"
                  type="password"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="确认新密码" prop="checkPass" required>
                <el-input
                  v-model="ruleForm.checkPass"
                  type="password"
                  autocomplete="off"
                />
              </el-form-item>
              <div style="display: flex; justify-content: center">
                <el-form-item>
                  <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                  </el-button>
                  <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<style scoped>
#mainView {
  height: 100%;
  width: 100%;
}

.form_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
</style>
